.filter--wrapper {
  height: 44px;
  width: 100%;
  position: relative;
  display: flex;
  background: #ffffff;
  .filter--item {
    flex:1;
    text-align: center;
    .title--wrapper {
      padding: 15px 0px;
      box-sizing: border-box;
      .right--trangle {
        display: inline-block;
        position: relative;
        top: 0px;
        margin-left: 6px;
        border: 3px solid transparent;
        border-top-color: #333333;
        transition: all .3s;
      }
      .right-icon {
        display: inline-block;
        position: relative;
        width: 16px;
        height: 16px;
        top: 4px;
        margin-left: 2px;
        background-image: url(../../example/images/filter-normal.svg);
        background-size: 100% 100%;
      }
    }
    .selected {
      color: #3E81F1;
      .right--trangle {
        border-top-color: #3E81F1;
        transform: rotate(-180deg);
        top: -3px;
      }
      .right-icon {
        background-image: url(../../example/images/filter-tint.svg)
      }
    }
  // for bottom section style
    .section--wrapper {
        position: absolute;
        top: 44px;
        right: 0px;
        left: 0px;
        //overflow: hidden;
        transition: all 0s;
        z-index: 2;
        &.fade-active-enter{
        }
        &.fade-active-leave{
          //opacity: 0;
          tansform: tanslateY(-100%);
        }
    }
    .mix--show {
      background-color: #fff;
      .mix--wrapper {
        border-bottom: 1px solid #f3f3f3;
        .mix--item-title {
          padding-top: 12px;
          padding-left: 7px;
          text-align: left;
          background-color: #fff;
          font-size: 14px;
          color: #333;
        }
      }
      .btn--wrapper {
        position: absolute;
        display: flex;
        bottom: 0px;
        right: 0px;
        left: 0px;
        .btn {
          flex: 1;
        }
      }
    }
    //.section--single {
    //  &::after{
    //    display: none
    //  }
    //
    //}
  }
}

